<template>
  <transition name="fade">
    <dl ref="menu" class="opearMenu" v-if="modelValue" v-outClose="handleToShow">
      <dt @click="isTopping">
        {{ chatData.LatestMessInfo.isTopping ? "取消置顶" : "置顶" }}
      </dt>
      <dt @click="operateChat('close')">不显示聊天</dt>
      <dt @click="openDialog">删除聊天</dt>
    </dl></transition
  ><template v-if="isMounted"
    ><confirm-dialog
      to=".chat-box"
      v-model="showDialog"
      width="35%"
      title="删除聊天"
      :isLoading="isLoading"
      @confirm="operateChat('delete')"
      ><p>确定删除该聊天？</p></confirm-dialog
    ></template
  >
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import vOutClose from "@/directives/vueClickClose";
import { useMessagePinia } from "@/pinia/messages";
import { useUserPinia } from "@/pinia/user";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import confirmDialog from "@/components/confirmDialog.vue";

const props = withDefaults(
  defineProps<{
    modelValue?: boolean;
    userId: string;
  }>(),
  {
    modelValue: false,
  }
);
const emits = defineEmits<{
  (e: "update:modelValue", show: boolean): void;
}>();

const router = useRouter();
const route = useRoute();

const messageStore = useMessagePinia();
const { user } = storeToRefs(useUserPinia());

const chatData = computed(() => messageStore.chatList.get(props.userId)!);

/**
 * 改变该组件的显示状态
 */
const handleToShow: (show: boolean) => void = (show: boolean): void => {
  emits("update:modelValue", show);
};

/**
 * 是否挂载确认操作的对话框
 */
const isMounted = ref<boolean>(false);
/**
 * 是否显示确认操作的对话框
 */
const showDialog = ref<boolean>(false);
/**
 * 是否正在删除该条消息
 */
const isLoading = ref<boolean>(false);

// 准备打开对话框
const openDialog = () => {
  emits("update:modelValue", false);
  showDialog.value = true;
};

// 是删除还是不显示该聊天
const operateChat = (type: "close" | "delete") => {
  if (type === "close") handleToShow(false);
  else isLoading.value = true;
  messageStore
    .operateTheChat(
      {
        selfId: user.value.userId,
        otherId: props.userId,
        type,
      },
      () => {
        if (route.name !== "index") router.replace("/");
      }
    )
    .then((code: number) => {
      if (type === "delete") {
        isLoading.value = false;
        showDialog.value = false;
      }
      if (code === -2)
        ElMessage({
          type: "error",
          message: "操作失败，对方和自己不是好友关系",
          duration: 1500,
        });
      else if (code !== 1)
        ElMessage({
          type: "error",
          message: "操作失败",
          duration: 1500,
        });
    })
    .catch(() => {
      if (type === "delete") {
        isLoading.value = false;
        showDialog.value = false;
      }
      ElMessage({
        type: "error",
        message: "操作失败",
        duration: 1500,
      });
    });
};

// 是置顶还是取消置顶
const isTopping = () => {
  handleToShow(false);
  messageStore
    .chatTopping({
      selfId: user.value.userId,
      otherId: props.userId,
    })
    .then((code: number) => {
      if (code === -2)
        ElMessage({
          type: "error",
          message: "操作失败，对方和自己不是好友关系",
          duration: 1500,
        });
      else if (code !== 1)
        ElMessage({
          type: "error",
          message: "操作失败",
          duration: 1500,
        });
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "操作失败",
        duration: 1500,
      });
    });
};

onMounted(() => (isMounted.value = true));
</script>

<style lang="scss" scoped>
.fade {
  @include fade(0.15s, ease);
}

.opearMenu {
  @include opearMenu(999, 14px);
}
</style>
